<template>
	<Container>
		<view class="header">
			<view class="header-content" :style="{ background: 'url(' + assignment.background + ') 0 0 /100% 100%' }"><Article :articles="assignment.articles" /></view>
			<AudioIcon @iconTap="iconTap" :questionPress="questionPress" />
			<view class="pointContain" :style="{ left: assignment.partData.x, top: assignment.partData.y }"></view>
		</view>
		<Question :question="assignment.questionName" />
		<Record class="record" ref="audio" @recordFinish="recordFinish" :isStart="questionPress" :answerText="assignment.answerTexts" :typeCode="assignment.typeCode" />
	</Container>
</template>

<script>
import { mixins } from '../../../common/mixins/assignmentDefault.js'
import Article from '../article.vue'
import AudioIcon from '../audioIcon.vue'
import Question from '../questionName.vue'
import Container from '../container.vue'
import Record from '../record.vue'
export default {
	components: { Article, AudioIcon, Question, Container, Record },
	mixins: [mixins]
}
</script>

<style scoped lang="stylus">
.header
	height 45vh
	width 100%
	overflow hidden
	border-radius 70rpx
	border 12rpx solid #FCC77D
	box-sizing border-box
	transform translate3d(0, 0, 0)
	position relative
	margin 5vh 0
	.header-content
		position absolute
		height 100%
		width 1080rpx
		left 50%
		top 50%
		transform translate3d(-50%, -50%, 0)
		z-index 98
	.pointContain
		position absolute
		width 40rpx
		height 60rpx
		margin-left -10rpx
		animation pointScale 1s infinite
		z-index 99
		background url('http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/Static-library/assignment/image/breakthrough/点击手.png') center center / contain no-repeat
@keyframes ripple
	0%
		transform scale(1)
		opacity 1
	50%
		transform scale(1.2)
		opacity 0
	100%
		transform scale(1)
		opacity 1
</style>
